<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        list
        */
        /*section > p:first-of-type{*/
            /*border: 1px solid #808080;*/
            /*border-radius: 5px;*/
            /*text-align: center;*/
        /*}*/

        /*section > h3:last-child{*/
            /*border: 1px solid #808080;*/
            /*border-radius: 5px;*/
            /*text-align: center;*/
        /*}*/

        /*
        l = [1,2,3,4]
        l[0]
        */

        /*
        n 0,1,2,3
        */
        /*
        1 3 5 7 9

        */
        section > p:nth-child(7n+1) {
            color: #d41f0e;
            letter-spacing: 5px;
        }

        /*section > p:nth-child(7n+2) {*/
            /*color: orange;*/
            /*letter-spacing: 5px;*/
        /*}*/

        /*p:before{*/
            /*content: 'p标签';*/
        /*}*/

        /*section > p:nth-child(7n+3) {*/
            /*color: yellow;*/
            /*letter-spacing: 5px;*/
        /*}*/

        /*section > p:nth-child(7n+4) {*/
            /*color: green;*/
            /*letter-spacing: 5px;*/
        /*}*/

        /*section > p:nth-child(7n+5) {*/
            /*color: #42ffff;*/
            /*letter-spacing: 5px;*/
        /*}*/

        /*section > p:nth-child(7n+6) {*/
            /*color: blue;*/
            /*letter-spacing: 5px;*/
        /*}*/

        /*section > p:nth-child(7n) {*/
            /*color: purple;*/
            /*letter-spacing: 5px;*/
        /*}*/

        /*:empty{*/
            /*border: 1px solid #d433af;*/
            /*width: 100px;*/
            /*height: 100px;*/
        /*}*/

        /*div.wrap {*/
            /*border: 1px solid #808080;*/
            /*border-radius: 5px;*/

            /*display: flex;*/
            /*flex-flow: column wrap;*/
            /*justify-content: center;*/
            /*align-items: center;*/
        /*}*/

        /*section{*/
            /*display: inline;*/
        /*}*/
        /*:empty {*/
            /*width: 400px;*/
            /*height: 30px;*/
            /*border: 1px solid red;*/
            /*border-radius: 5px;*/
        /*}*/
        /*从整个文档开始算*/


        /*把所有的p标签选出来 做成一个list*/
        /*p:nth-of-type(2n-1){*/
            /*color: red;*/
        /*}*/
        /*
        把所有所有标签取出来 包含 ol p h3 做成一个list
        */
        /*p:nth-child(2n-1){*/
            /*color: red;*/
        /*}*/
        /*input{*/
            /*height: 100px;*/
        /*}*/





    </style>
</head>
<body>
    <p>曾经沧海难为水，除却巫山不是云。</p>
    <p>曾经沧海难为水，除却巫山不是云。</p>
    <p>曾经沧海难为水，除却巫山不是云。</p>
    <p style="height: 10px">曾经沧海难为水，除却巫山不是云。</p>
    <h3>江山如此多娇，引无数英雄竞折腰。</h3>
    <h3>江山如此多娇，引无数英雄竞折腰。</h3>
    <h3>江山如此多娇，引无数英雄竞折腰。</h3>
    <h3>江山如此多娇，引无数英雄竞折腰。</h3>
    <h3>江山如此多娇，引无数英雄竞折腰。</h3>
    <p>曾经沧海难为水，除却巫山不是云。</p>
    <p>曾经沧海难为水，除却巫山不是云。</p>
    <p>曾经沧海难为水，除却巫山不是云。</p>
    <p>曾经沧海难为水，除却巫山不是云。</p>
</body>
</html>